<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>admin table</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="../simditor-2.3.28/styles/simditor.css"/>
</head>
<body>

<div class="layui-form" lay-filter="layuiadmin-app-form-list" style="margin: 10px 20px">
    <div onclick="openAdd()" style="margin-bottom: 10px">
        <button type="button" class="layui-btn">添加公告</button>
    </div>
    <table id="list" lay-filter="list"></table>

</div>
<div id="openAdd" class="layui-row" hidden>
    <div style="margin-left: 10%;margin-top: 20px;width: 80%">
        <form lay-filter="addForm" class="layui-form" action="">
            <input name="id" type="number" hidden/>
            <div class="layui-form-item">
                <label class="layui-form-label">公告标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">公告内容</label>
            </div>
            <div>
                <textarea id="content" name="content" placeholder="请输入内容" autofocus></textarea>

            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">展示状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="display" value="1" title="显示" checked>
                    <input type="radio" name="display" value="2" title="隐藏">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="number" name="sort" required lay-verify="required" value="0"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <!--            <div class="layui-form-item">-->
            <!--                <label class="layui-form-label">状态</label>-->
            <!--                <div class="layui-input-block">-->
            <!--                    <input type="radio" name="status" value="1" title="正常" checked>-->
            <!--                    <input type="radio" name="status" value="2" title="禁用">-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button id="submit" type="button" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="../layui/layui.js"></script>
<script type="text/javascript" src="../simditor-2.3.28/site/assets/scripts/module.js"></script>
<script type="text/javascript" src="../simditor-2.3.28/site/assets/scripts/hotkeys.js"></script>
<script type="text/javascript" src="../simditor-2.3.28/site/assets/scripts/uploader.js"></script>
<script type="text/javascript" src="../simditor-2.3.28/site/assets/scripts/simditor.js"></script>
<script type="text/html" id="action">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use('table', function () {
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#list',
            // height: 312,
            url: 'noticeList?needData=1', //数据接口//
            request: {
                limitName: 'size' //每页数据量的参数名，默认：limit
            },
            parseData: function (res) { //res 即为原始返回的数据
                if (res.code == 200)
                    res.code = 0
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.data //解析数据列表
                };
            },
            page: true,//开启分页
            cols: [[ //表头
                {field: 'id', title: 'ID', width: '100', sort: true},
                {field: 'title', title: '标题', width: '200'},
                {
                    field: 'display', title: '展示状态', width: '100', templet: function (d) {
                        show = '异常'
                        if (d.display == 1)
                            show = '<a class="layui-btn layui-btn-xs" lay-event="hide">展示</a>'
                        if (d.display == 2)
                            show = '<a class="layui-btn layui-btn-xs" lay-event="show">隐藏</a>'
                        return show
                    }
                },
                {field: 'sort', title: '排序', width: '100', sort: true},
                {field: 'create_time', title: '创建时间', width: '200'},
                {field: 'update_time', title: '更新时间', width: '200'},
                {fixed: 'right', title: '操作', toolbar: '#action', width: '150'}
            ]],
            text: {
                none: '暂无数据' //默认：无数据。
            },
            defaultToolbar: ['filter'],
        })
        table.on('tool(list)', function (obj, table) {
            // var data = obj.data; //获得当前行数据
            // if (layEvent == 'edit') {
            //     window.location = 'editPsw.html?aid=' + data.admin_id
            // }
            switch (obj.event) {
                case 'show':
                    tableSingleAttributeUpdate(obj, 'display', 1)
                    break;
                case 'hide':
                    tableSingleAttributeUpdate(obj, 'display', 2)
                    break;
                case 'edit':
                    openEdit(obj.data)
                    break;
                case 'del':
                    layer.confirm('确定删除该规格？', function (index) {
                        obj.data['deleted'] = 1
                        edit(obj.data, function (res) {
                            if (res.code != 200) {
                                layer.msg(res.error)
                            } else {
                                layer.msg('修改成功')
                                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                layer.close(index);
                            }
                        })
                    });
                    break;
            }
        });

    });

    function tableSingleAttributeUpdate(obj, field, value) {
        obj.data[field] = value
        edit(obj.data, function (res) {
            if (res.code != 200) {
                layer.msg(res.error)
            } else {
                layer.msg('修改成功')
                var f = {}
                f[field] = value
                obj.update(f);
            }
        })
    }

    function edit(data, callback) {
        $.ajax({
            url: 'editNotice',
            type: 'POST',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (callback != undefined) {
                    callback(res)
                } else {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('修改成功')
                    }
                }
            },
        });
    }

    function openAdd() {
        layer.open({
            type: 1,
            content: $('#openAdd'),
            area: ["800px", "500px"],
            title: '添加公告',
            anim: 1,
            success: function () {
                $('button[type=reset]').click()
                richTextLoad()
            }
        });
    }

    function openEdit(data) {
        layer.open({
            type: 1,
            content: $('#openAdd'),
            area: ["800px", "500px"],
            title: '编辑公告信息',
            anim: 1,
            success: function () {
                form = layui.form
                form.val('addForm', data)
                richTextLoad()
            }
        });
    }

    function richTextLoad() {
        toolbar = ['title', 'bold', 'italic', 'underline', 'strikethrough',
            'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|',
            'link', 'image', 'hr', '|', 'indent', 'outdent'];
        var editor = new Simditor({
            textarea: $('#content'),
            placeholder: '这里输入内容...',
            toolbar: toolbar,  //工具栏
            defaultImage: '../simditor-2.3.28/site/assets/images/image.png', //编辑器插入图片时使用的默认图片
            upload: {
                url: 'uploadImg', //文件上传的接口地址
                params: null, //键值对,指定文件上传接口的额外參数,上传的时候随文件一起提交
                fileKey: 'file', //server端获取文件数据的參数名
                connectionCount: 3,
                leaveConfirm: '正在上传文件'
            }
        });
    }

    //Demo
    layui.use('form', function () {
        var form = layui.form;
        $('#submit').on('click', function () {
            var formData = form.val('addForm')
            console.log(formData)
            if (formData['id'] <= 0)
                delete formData['id']
            else {
                edit(formData, function (res) {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('修改成功')
                        location.reload()
                    }
                })
                return
            }
            $.ajax({
                url: 'addNotice',
                type: 'POST',
                data: formData,
                dataType: 'json',
                success: function (res) {
                    if (res.code != 200) {
                        layer.msg(res.error)
                    } else {
                        layer.msg('添加成功')
                        location.reload();
                    }
                }, error: function (res) {
                    layer.msg()
                }
            })
        })
    });

</script>
</body>
</html>
